<template>
  <page-wrap stay-still :bgColor="topBg" hideTab :dark="false" back hideSafeArea title="活动详情">
    <view class="sxh">
      <view v-if="!showForm">
        <button v-if="personId" @click="handleJoin" class="btn-join">
          立即参会
        </button>
        <button
          v-else-if="isAuthSetting"
          open-type="getPhoneNumber"
          class="btn-join"
          :hair-line="false"
          @getphonenumber="getPhoneNumber"
        >
          立即参会
        </button>
        <button
          v-else
          open-type="getUserInfo"
          class="btn-join"
          :hair-line="false"
          @getuserinfo="getUserInfo"
          :loading="getUserInfoLoading"
        >
          立即参会
        </button>
      </view>
      <view class="form" v-if="showForm">
        <view class="form-item">
          <view class="form-item-label">姓名</view>
          <view class="form-item-content">
            <input
              v-model="name"
              class="form-item-input"
              placeholder="请填写姓名"
            />
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-label">学校</view>
          <view class="form-item-content">
            <input
              v-model="school"
              class="form-item-input"
              placeholder="请填写学校名称"
            />
          </view>
        </view>
        <view class="form-item">
          <view class="form-item-label">专业</view>
          <view class="form-item-content">
            <input
              v-model="major"
              class="form-item-input"
              placeholder="请填写专业名称"
            />
          </view>
        </view>
        <view class="btn-submit" @click="handleSubmit">入场</view>
      </view>
      <view class="guide">
        <view @click="handleShowDesc"> 活动介绍 </view>
        <view @click="handleShowGuide"> 交通指引 </view>
        <view @click="handleShowQun" class="guide-qun">咨询交流群</view>
      </view>
      <u-popup v-model="showGuide" mode="center">
        <img :src="trafficImg" class="traffic-img" />
      </u-popup>
      <u-popup v-model="showDesc"
        mode="bottom"
        closeable
        width="100%">
        <view class="desc-title">
          活动介绍
        </view>
        <scroll-view scroll-y="true" style="height: 80vh;">
            <img :src="descImg" class="desc-img" />
				</scroll-view>
      </u-popup>
      <u-popup v-model="showQun" mode="center" border-radius="20" closeable>
        <view class="qun">
          <view class="qun-title">扫码入群</view>
          <img :src="qunImg" class="qun-img" show-menu-by-longpress />
          <view class="qun-label">
            <view>企业招聘信息及时同步</view>
            <view>求职路上，你不是一个人在战斗</view>
          </view>
        </view>
      </u-popup>
    </view>
  </page-wrap>
</template>
<script>
import WxLoginMixin from "@/mixins/wxLogin";
import ShareMixin from "@/mixins/share";
import { checkEnroll, addPersonApply } from "@/api/modules/zph";
import { getPersonDetail } from "@/api/index";

export default {
  mixins: [WxLoginMixin, ShareMixin],
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      topBg: `url(${this.$imgBaseSelf}home/top_bg.png)`,
      // descImg: this.$imgBaseSelf+'zph/sxh/field-map.png',
      trafficImg: this.$imgBaseSelf+'zph/sxh/traffic.png',
      descImg: this.$imgBaseSelf+'zph/sxh/desc.png',
      qunImg: this.$imgBaseSelf + "zph/sxh/qun.png",
      showForm: false,
      name: "",
      school: "",
      major: "",
      activityId: "2031721125699544", // 招聘会id
      enrollStatus: "", // 是否报名活动，1是，0否
      showGuide: false,
      showDesc: false,
      showQun: false,
      sharePath: "/pagesSub/activity/sxh/index",
      shareTitle: "第28届全国高校毕业生秋季就业双选会 - 一览职业",
      userInfo: {},
    };
  },
  created() {
    if (this.personId) {
      this.getPersonDetail();
    }
    this.checkAuthSetting();
  },
  methods: {
    checkEnroll() {
      uni.showLoading();
      const params = {
        activityId: this.activityId,
        personId: this.personId,
      };
      checkEnroll(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          this.enrollStatus = res.data.enrollStatus;
          if (this.enrollStatus == 1) {
            uni.navigateTo({
              url: "/pagesSub/activity/sxh/EventVenue",
            });
          } else {
            this.showForm = true;
          }
        }
      });
    },
    handleJump(personId) {
      this.personId = personId;
      this.getPersonDetail().then(() => {
        this.checkEnroll();
      })
    },
    getPersonDetail(update) {
      if (
        !getApp().globalData.userInfo ||
        !getApp().globalData.userInfo.id ||
        update
      ) {
        let param = {
          param: JSON.stringify({
            personId: this.personId,
          }),
          where: "",
          slaveInfo: 1,
        };
        return getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf("img.job1001.com/myUpload/pic.gif") >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }
          getApp().globalData.userInfo = this.userInfo;
          return res
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
        return new Promise((resolve, reject) => {
          resolve();
        });
      }
    },
    apply() {
      uni.showLoading({
        title: "参加中",
      });
      const userInfo = getApp().globalData.userInfo || { shouji: "" };
      const params = {
        personId: this.personId,
        activityId: this.activityId,
        mobile: userInfo.shouji,
        applyInfo: {
          name: this.name,
          school: this.school,
          major: this.major,
        },
      };
      addPersonApply(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          uni.navigateTo({
            url: "/pagesSub/activity/sxh/EventVenue",
          });
        } else {
          uni.showToast({
            icon: "none",
            title: res.status_desc,
          });
        }
      });
    },
    handleJoin() {
      this.checkEnroll();
    },
    handleSubmit() {
      if (!this.name) {
        uni.showToast({
          title: "请填写姓名",
          icon: "none",
          duration: 2000,
        });
      } else if (!this.school) {
        uni.showToast({
          title: "请填写学校名称",
          icon: "none",
          duration: 2000,
        });
      } else if (!this.major) {
        uni.showToast({
          title: "请填写专业",
          icon: "none",
          duration: 2000,
        });
      } else {
        this.apply();
      }
    },
    handleShowGuide() {
      this.showGuide = true;
    },
    handleShowDesc() {
      this.showDesc = true;
    },
    handleShowQun() {
      this.showQun = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.sxh {
  height: 1375rpx;
  padding-top: 544rpx;
  background-image: url($img-base + "zph/sxh/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.btn-join {
  margin: 0 auto;
  width: 300rpx;
  height: 300rpx;
  line-height: 300rpx;
  font-weight: 600;
  font-size: 44rpx;
  color: #ffffff;
  border-radius: 50%;
  background: linear-gradient(180deg, #4abcd4 0%, #2851f9 100%);
  box-shadow: 0px 0px 0px 10rpx rgba(255, 255, 255, 0.6),
    inset 0px 0px 40rpx 0px rgba(255, 255, 255, 0.42);

  &::after {
    content: none;
  }
}

.form {
  margin: 0 auto;
  width: 686rpx;
  padding: 65rpx 50rpx 44rpx;
  background-color: #ffffff;
  background: linear-gradient(180deg, #daecfe 0%, #ffffff 50rpx);
  border-radius: 24rpx;
  border: 1rpx solid #979797;

  &-item {
    display: flex;
    margin-bottom: 48rpx;

    &-label {
      width: 78rpx;
      line-height: 42rpx;
      font-size: 30rpx;
      color: #333333;
    }

    &-content {
      flex: 1;
      padding-bottom: 12rpx;
      overflow: hidden;
      border-bottom: 2rpx solid #979797;
    }

    &-input {
      font-size: 30rpx;
    }

    ::v-deep .input-placeholder {
      color: #888888;
    }
  }

  .btn-submit {
    margin-top: 72rpx;
    width: 586rpx;
    font-size: 32rpx;
    line-height: 80rpx;
    color: #ffffff;
    text-align: center;
    background-color: #1b74f4;
    border-radius: 14rpx;
  }
}

.guide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50rpx auto;
  text-align: center;
  color: #027db4;

  view {
    margin: 0 54rpx;
  }

  &-qun {
    position: relative;
    font-size: 30rpx;

    &::after {
      position: absolute;
      right: -14rpx;
      top: -2px;
      content: '';
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background-color: #FA5151;
    }
  }
  
}

.traffic-img {
  padding: 24rpx;
  width: 688rpx;
  height: 688rpx;
}

.desc-title {
  margin: 32rpx 0;
  text-align: center;
}

.desc-img {
  width: 100%;
  height: 6709rpx;
}

.qun {
  padding-bottom: 32rpx;
  text-align: center;

  &-title {
    margin: 32rpx;
    font-size: 36rpx;
  }

  &-img {
    margin: 0 140rpx;
    width: 320rpx;
    height: 320rpx;
  }

  &-label {
    margin: 32rpx;
    font-size: 24rpx;
  }
}
</style>